<template>
  <div>
    <!-- 文章列表 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        :immediate-check="false"
        offset="50"
      >
        <ArticleItem
          v-for="obj in list"
          :key="obj.art_id"
          :artObj="obj"
          @disLikeEV="disLikeFn"
          @reportEV="reportFn"
          @click.native="itemClickFn(obj.art_id)"
        ></ArticleItem>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import ArticleItem from '../../../components/ArticleItem.vue'
import { getAllArticleListAPI, dislikeArticleAPI, reportArticleAPI } from '@/api'
import  { Notify } from 'vant'
// 问题1：网页刚打开, created里请求和onLoad里请求同时发送，请求的都是同一份最新数据
// onLoad中，2次一样的数据合并，数据重复,key重复了
// 原因: van-list 组件,组件挂载时，默认就会判定一次是否触底
// 第一页数据也是网络请求回来的，标签先挂载了,数据回来再更新DOM，所以此时标签没有高度，导致list的load事件上来就触发(网络异步请求)
// 解法1：:immediate-check="false"
// 解法2：onLoad事件中进行数组长度的判定不执行

export default {
  props: {
    //list: Array // 文章列表数组
    channelID: Number // 频道ID
  },
  data() {
      return {
        list: [], //文章列表数组
        loading: false, // 底部加载状态
        finished: false, // 底部完成状态
        theTime: new Date().getTime(), // 用于分页
        isLoading: false // 顶部加载状态
      }
  },
  components: {
    ArticleItem
  },
  async created() {
     this.getArticleListFn()
     console.log('初始化加载完毕')
  },
  methods: {
    // 专门负责发送请求
    async getArticleListFn() {
        const res =  await getAllArticleListAPI({
          channel_id: this.channelID,
          timestamp: this.theTime
        })
        // 下一段开头的那篇文章时间戳
        // 第一次 系统时间(timestamp) -> 后台 返回0-9条数据 -> 携带第10条pre_timestamp值返回
        // 第二次 (timestamp)-上一次pre_timestamp (代表告诉后，从指定的时间戳再往后找10个) 10 - 19条，20条, pre_timestamp返回

        //
        this.list = [...this.list, ...res.data.data.results]
        this.theTime = res.data.data.pre_timestamp
        this.loading = false // 如果不关闭，底部一直是加载中状态，下次触底时会再触发onLoad

        if (res.data.data.pre_timestamp === null) { // 本次回来的数据是最后，没有更多数据了
          this.finished = true
          return
        }
        // 顶部加载状态改为false
        this.isLoading = false
    },
    //底部加载的事件方法
    async onLoad() {
       console.log('onLoad事件开始响应')
       if (this.list.length == 0) {
           return // 如果页面没有数据，没有高度，让本次onLoad逻辑代码不往下执行
       }
       this.getArticleListFn()
    },
    //顶部-刷新数据事件方法
    async onRefresh() {
      //目标: list 数据清空,来一份新的数据
      console.log('刷新事件方法')
      this.list = []
      this.theTime = new Date().getTime()
      this.getArticleListFn()
    },
    async disLikeFn(id) {
      // 如果用try + catch 自己处理错误, 内部throw 就不会向内部抛出,会交给用户catch自定义错误
      // try + catch 捕获同步代码的异常
      try{
        const res = await dislikeArticleAPI({
          artId: id
        })
        // res里没有什么有用的信息，所以await往下放行
        console.log(res)
        Notify({ type: 'success', message:'反馈成功'})
        console.log('成功了')
      }  catch (err) {
        console.log('失败了')
      }

    },
    // 反馈 - 垃圾内容
    async reportFn(id, value) {
        try{
          await  reportArticleAPI({
            artId: id,
            type: value
          })
          Notify({ type: 'success', message:'举报成功'})
          console.log('成功了')
        }catch (err) {
          console.log('失败了')
        }
    },
    // 文章单元格- 点击事件
    itemClickFn(id) {
        this.$router.push({
          path: `/detail?art_id=${id}`
        })
    }
  }
}
</script>
